import React, { Component } from 'react';
import { Input, Space, message } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import styles from './index.less';
import qw from '../../../api/grade/grade.js';

export default class GradeAdd extends Component {
    state = {
        val: "",
    }
    onSearch = async (value, event) => {
        if (value != "") {
            //value值是输入的值
            const re = await qw.addGradeApi({
                courseNum: 0,
                id: 0, name: value
            });
            console.log("rere",re);
            if (re.code === 200) {
                // alert("新建年级成功！");
                this.success();
                this.setState({ val: "" });
            }
            else if(re.code === 101)
            {
                message.error('创建值重复', 4);
                this.setState({ val: "" });
            }
            else if(re.code===102){
                message.error('创建失败！年级名长度应该在2-5个字符', 4);
                this.setState({ val: "" });
            }
        }
        else{
            message.error('新建年级失败,输入值不可为空', 4);
        }
    }
    suffix = () => {
        return (
            <AudioOutlined
                style={{
                    fontSize: 16,
                    color: '#1890ff',
                }}
            />
        )
    }
    setVal = (e) => {
        const val = e.target.value;
        this.setState({ val });
    }
    success = () => {
        //全局提示
        message.success('恭喜！新建年级成功', 4);
    }
    render() {
        const { Search } = Input;
        return (
            <div>
                <div className={styles.setFont}>
                    新增年级
                </div>
                <div id={styles.gradeAdd}>
                    <div className={styles.boxShadow}>
                        <Space direction="vertical">
                            <Search
                                placeholder="please input will create "
                                allowClear
                                enterButton="Add"
                                size="large"
                                onSearch={this.onSearch}
                                value={this.state.val}
                                onChange={this.setVal}
                            />
                        </Space>
                    </div>
                </div>
            </div>
        )
    }
}
